<div class="row">
    <div id="breadcrumb" class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="#">缴费管理</a></li>
            <li><a href="#">车位费</a></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <div class="box-name">
                    <button id="addParkLotFeeBtn" class="btn btn-info">添加车位费</button>
                </div>
                <div class="box-icons">
                    <a class="expand-link">
                        <i class="fa fa-expand"></i>
                    </a>
                </div>
                <div class="no-move"></div>
            </div>
            <div class="box-content no-padding">
                <table class="table table-bordered table-striped table-hover table-heading table-datatable"
                       id="parkLotFeeListTable">
                    <thead>
                    <tr>
                        <th>车位类别</th>
                        <th>管理费用</th>
                        <th>按月计费</th>
                        <th>按次计费</th>
                        <th>收费时间</th>
                        <th>生效时间</th>
                        <th>迟滞金单价</th>
                        <th>迟滞金规则</th>
                        <th>删除</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Start: list_row -->
                    <!-- End: list_row -->
                    </tbody>
                    <tfoot>
                    <tr>
                        <th>车位类别</th>
                        <th>管理费用</th>
                        <th>按月计费</th>
                        <th>按次计费</th>
                        <th>收费时间</th>
                        <th>生效时间</th>
                        <th>迟滞金单价</th>
                        <th>迟滞金规则</th>
                        <th>删除</th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" role="dialog" id="addParkLotFeeModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">配置车位费</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <form class="form-horizontal" role="form" id="parkLotFeeFrom">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">选择园区</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="villageId" id="villageList">
                                        <option value="">--选择园区--</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">车位类型</label>
                                <div class="col-sm-8">
                                    <select name="parkLotType" id="" class="form-control">
                                        <option value="">--请选择---</option>
                                        <option value="1">小型车位</option>
                                        <option value="2">中型车位</option>
                                        <option value="3">大型车位</option>
                                    </select>
                                    <!--<input type="text" name="fee_name" class="form-control" placeholder="">-->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">管理费用</label>
                                <div class="col-sm-8">
                                    <input type="text" name="unitPrice"  class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">按月计费</label>
                                <div class="col-sm-8">
                                    <input type="text" name="monthPrice"  class="form-control" placeholder="月租费用">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">按次计费</label>
                                <div class="col-sm-8">
                                    <input type="text" name="perTimePrice"  class="form-control" placeholder="每次进出费用">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">收费时间</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control input_date" name="payStartTime"
                                           placeholder="开始时间">
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control input_date" name="payEndTime"
                                           placeholder="结束时间">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">生效时间</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control input_date" name="startTime" placeholder="">
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control input_date" name="endTime" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">滞纳金</label>
                                <div class="col-sm-2">
                                    <input type="text" class="form-control" name="overdueUnitPrice" placeholder="">
                                </div>
                                <div class="col-sm-5">
                                    <div class="radio-inline">
                                        <label>
                                            <input type="radio" checked="" name="overdueUnit" value="month">每月
                                            <i class="fa fa-circle-o"></i>
                                        </label>
                                    </div>
                                    <div class="radio-inline">
                                        <label>
                                            <input type="radio" checked="" name="overdueUnit" value="day"> 每日
                                            <i class="fa fa-circle-o"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-2">
                                    <button type="submit" class="btn btn-primary">确认添加</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
    var editTable;//全局的datatable变量

    $("#addParkLotFeeBtn").click(function(){
        $("#addParkLotFeeModal").modal("show");//弹出框show
    });


    //编辑数据
    $('#parkLotFeeListTable tbody').on( 'click', 'button#editRow', function () {
        var data = editTable.row($(this).parents('tr') ).data();
        var fields = $("#estateFeeFrom").serializeArray();
        console.log(data);
        console.log(fields);
//        jQuery.each( fields, function(i, field){
//            console.log(field);
//            $(field).val(data[i]);
//        });
        $(":input[name='action']").val("edit");
        $("#formModel").modal("show");//弹出框show
        $("#formModel").find('.modal-title').text("编辑费用项目");

    });

    //ajax添加物业费项目
    function submitForm()
    {
        var fields = $("#parkLotFeeFrom").serializeArray();
        console.log(fields);

        $.ajax({
            type: "post",
            async: false,
            url: urlConfig.addParkLotFee,
            data: fields,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    alert("添加成功");
                    editTable.ajax.reload( null, false );
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    }

    //增加物业费时进行表单验证
    function partLotFeeAddValidator() {
        $('#parkLotFeeFrom').bootstrapValidator({
            message: '存在非法输入',
            fields: {
                villageId:{
                    validators: {
                        notEmpty: {
                            message: '请选择园区'
                        }
                    }
                },
                parkLotType: {
                    validators: {
                        notEmpty: {
                            message: '请选择车位类型'
                        }
                    }
                },
                perTimePrice:{
                    validators: {
                        notEmpty: {
                            message: '按次计费项目不能为空'
                        },
                        regexp: {
                            regexp: /^(([1-9]\d*)|0)(\.\d{1,2})?$/,
                            message: '费用只能为两位小数或整数'
                        }
                    }
                },
                monthPrice:{
                    validators: {
                        notEmpty: {
                            message: '按月计费项目不能为空'
                        },
                        regexp: {
                            regexp: /^(([1-9]\d*)|0)(\.\d{1,2})?$/,
                            message: '费用只能为两位小数或整数'
                        }
                    }
                },
                unitPrice: {
                    validators: {
                        notEmpty: {
                            message: '车位管理费不能为空'
                        },
                        regexp: {
                            regexp: /^(([1-9]\d*)|0)(\.\d{1,2})?$/,
                            message: '费用只能为两位小数或整数'
                        }
                    }
                },
                overdueUnitPrice: {
                    validators: {
                        notEmpty: {
                            message: '滞纳金不能为空'
                        },
                        regexp: {
                            regexp: /^(([1-9]\d*)|0)(\.\d{1,2})?$/,
                            message: '滞纳金单价只能为两位小数或整数'
                        }
                    }
                }
            }
        })
                .on("success.form.bv",function(e){
                    e.preventDefault();
                    submitForm();
                });
    }



    //初始化表格数据
    function initDataTable(){
        editTable=$('#parkLotFeeListTable').DataTable({
            "processing":true,
            "serverSide": true,
            "ajax":{
                "url": urlConfig.parkLotFeeList,
                "dataSrc": "jsonString"
            },
            "columnDefs": [{
                "targets": 0,
                "data": "name",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    if(data=="1")
                        return "小型车位";
                    else if(data=="2")
                        return "中型车位";
                    else if(data=="3")
                        return "大型车位";
                    else
                        return "--";
                }
            },{
                "targets": 1,
                "data": "ruleEntity.unitPrice",
                "orderable": false,
                "searchable": false

            },{
                "targets": 2,
                "data": "parkLotExtra.monthPrice",
                "orderable": false,
                "searchable": false

            },{
                "targets": 3,
                "data": "parkLotExtra.perTimePrice",
                "orderable": false,
                "searchable": false

            },{
                "targets": 4,
                "data": "parkLotExtra",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    var start=formatDate(data.payStartTime,"yyyy-MM-dd");
                    var end=formatDate(data.payEndTime,"yyyy-MM-dd");
                    return start+"&nbsp;至&nbsp;"+end;
                }

            },{
                "targets": 5,
                "data": "ruleEntity.startTime",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    var start=formatDate(row.ruleEntity.startTime,"yyyy-MM-dd");
                    var end=formatDate(row.ruleEntity.endTime,"yyyy-MM-dd");
                    return start+"&nbsp;至&nbsp;"+end;
                }
            },{
                "targets": 6,
                "data": "ruleEntity.overdueUnitPrice",
                "orderable": false,
                "searchable": false
            },{
                "targets": 7,
                "data": "ruleEntity.overdueUnit",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    if(data=="day")
                        return "每天";
                    else if(data=="month")
                        return "每月";
                    else
                        return "--";
                }
            },{
                "targets": 8,//删除
                "data": null,
                "orderable": false,
                "searchable": false,
                "defaultContent":
                        "<button id='delRow' class='btn btn-primary' type='button'>删除</button>"
            }
            ],
            "autoWidth":false,
            "sDom":
                    "<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>tr<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>",
            "language": {
                "emptyTable":     "没有相关数据",
                "info": "显示 _START_ 到 _END_ 条, 共 _TOTAL_ 条记录",
                "infoEmpty":      "没有相关数据",
                "infoFiltered":   "(筛选自 _MAX_ 条记录)",
                "infoPostFix":    "",
                "thousands":      ",",
                "lengthMenu":     "每页显示 _MENU_ 条",
                "loadingRecords": "加载中",
                "processing":     "数据处理中",
                "search":         "搜索:",
                "zeroRecords":    "没有找到匹配数据",
                "paginate": {
                    "first":      "首页",
                    "last":       "末页",
                    "next":       "下一页",
                    "previous":   "上一页"
                },
                "aria": {
                    "sortAscending":  ":正序",
                    "sortDescending": ":倒序"
                }
            }
        });

    }

    $(document).ready(function() {
        $('.input_date').datepicker({
            setDate: new Date(), dateFormat: "yy-mm-dd",
            showButtonPanel: true,
            closeText: "关闭",
            yearSuffix: '年',
            currentText: '今天',
            showMonthAfterYear: true,
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六']
        });
        LoadDataTablesScripts(initDataTable);
        LoadBootstrapValidatorScript(partLotFeeAddValidator);
        initVillageSelect();
    });
</script>
